import React, { Component } from 'react';
import classNames from 'classnames';
import RiskSlider from '../riskslider/RiskSlider';
import { Scroll, SelectItemList, SelectItem } from '../common-ui-parts';
import { SimulationItemConstant as SiC } from '../../constants/InputItemConstants';
import CommonConstants from '../../constants/CommonConstants';
import HeadLine, { HEAD_LINE_COLOR } from '../common-ui-parts/HeadLine';
import { SingleValidation, MultipleValidation } from '../../validations/SimulationValidation';
import { validateAll } from '../../validations/';
import ErrorMessage from '../common-ui-parts/ErrorMessage';

/**
 * シミュレーション：脳卒中
 */
class Simulation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      viewInputData: props.inputData,
      errorMsg: undefined,
    }
  }

  // 画面内入力項目の反映
  _calcRisk = (name, value) => {
    const { viewInputData } = this.state;
    // 入力項目チェック
    if (((value === undefined) && (viewInputData[SiC.BLOOD_SUGAR_LEVEL_FASTING] === undefined))
      || ((name.id === SiC.BLOOD_SUGAR_LEVEL_FASTING.id) && (value === undefined))) {
      this.setState({ viewInputData: { ...viewInputData, [name]: value } });
    } else {
      const errorInfo = validateAll({ ...viewInputData, [name]: value }, SingleValidation, MultipleValidation);
      this.setState({ viewInputData: { ...viewInputData, [name]: value }, errorMsg: errorInfo.get() },
        () => {
          if (errorInfo.ok) {
            this.props.onCalcRisk(this.state.viewInputData);
          }
        }
      );
    }
  }

  scrollTop() {
    this.refs.scrollArea.scrollTop();
  }

  render() {
    const { inputData, risk, initialRisk, healthy } = this.props;
    const { viewInputData } = this.state; // 入力可能な値はviewInputDataを使用
    const errorText = this.state.errorMsg;

    return (
      <div className="Simulation">
        <RiskSlider
          current={Number(risk.probability.you)}
          initial={Number(initialRisk.probability.you)}
          min={Number(initialRisk.probability.min)}
          max={Number(initialRisk.probability.max)}
        />
        {/* エラーメッセージ */}
        {errorText && errorText.length > 0
          ? <div className="message-area">
            <ErrorMessage message={errorText} style={{ bottom: '-30px', left: '10%' }} />
          </div>
          : null}
        <Scroll
          ref="scrollArea"
          fixedHeight={CommonConstants.SCROLL_FIXED_HIGHT.SIMULATION}
          customStyle={CommonConstants.SCROLL_Z}
        >
          {/* あなた(現状) */}
          <div className="report-card">
            <div className="card-content">
              <p className="guidance-simulation">
                以下の選択可能な項目を変更することで、リスクがどのくらい変動するか確認いただけます。
              </p>
              <HeadLine
                level={2}
                others={{ style: { paddingTop: '37px' } }}
              >
                あなた&nbsp;{risk.probability.you.toFixed(CommonConstants.DECIMAL_DIGIT)}%
              </HeadLine>
              {/* 性別 */}
              <dl className="simulation-content">
                <dt>{SiC.GENDER.label}</dt>
                <dd>{SiC.GENDER.getLabel(inputData.gender)}</dd>
              </dl>
              {/* 年齢 */}
              <dl className="simulation-content">
                <dt>{SiC.AGE.label}</dt>
                <dd>{SiC.AGE.getLabel(inputData.age)}</dd>
              </dl>
              {/* 身長 */}
              <dl className="simulation-content">
                <dt>{SiC.BODY_HEIGHT.label}</dt>
                <dd>{SiC.BODY_HEIGHT.getLabel(inputData.bodyHeight)}</dd>
              </dl>
              {/* 体重 */}
              <dl className="simulation-content">
                <dt>{SiC.BODY_WEIGHT.label}</dt>
                <dd>
                  <SelectItemList
                    name={SiC.BODY_WEIGHT}
                    value={this.state.viewInputData[SiC.BODY_WEIGHT]}
                    propagate={(name, value) => this._calcRisk(name, value)}
                  >
                    {SiC.BODY_WEIGHT.choices.map((choice, index) => (
                      <SelectItem key={index} value={choice.value} label={choice.label} />
                    ))}
                  </SelectItemList>
                </dd>
              </dl>
              {/* 喫煙習慣 */}
              <dl className="simulation-content">
                <dt>{SiC.SMOKING_HABIT.label}</dt>
                <dd>
                  <SelectItemList
                    name={SiC.SMOKING_HABIT}
                    value={this.state.viewInputData[SiC.SMOKING_HABIT]}
                    propagate={this._calcRisk}
                  >
                    {SiC.SMOKING_HABIT.choices.map((choice, index) => (
                      <SelectItem key={index} value={choice.value} label={choice.label} />
                    ))}
                  </SelectItemList>
                </dd>
              </dl>
              {/* 糖尿病 参照 */}
              <dl className="simulation-content">
                <dt>{SiC.DIABETES_CURE_FLG.label}</dt>
                <dd>{SiC.DIABETES_CURE_FLG.getLabel(inputData.diabetesCureFlg)}</dd>
              </dl>

              {/* 血糖値（空腹時） */}
              <dl className="simulation-content">
                <dt className="row-2"><div><p>血糖値</p><p>空腹時</p></div></dt>
                <dd>
                  <SelectItemList
                    name={SiC.BLOOD_SUGAR_LEVEL_FASTING}
                    value={this.state.viewInputData[SiC.BLOOD_SUGAR_LEVEL_FASTING]}
                    //disabled={disabledInput.fasting}
                    placeholder="選択してください"
                    propagate={this._calcRisk}
                  >
                    {SiC.BLOOD_SUGAR_LEVEL_FASTING.choices.map((choice, index) => (
                      <SelectItem key={index} value={choice.value} label={choice.label} />
                    ))}
                  </SelectItemList>
                </dd>
              </dl>
              {/* 降圧剤 参照 */}
              <dl className="simulation-content">
                <dt>{SiC.ANTIHYPERTENSIVE_FLG.label}</dt>
                <dd>{SiC.ANTIHYPERTENSIVE_FLG.getLabel(inputData.antihypertensiveFlg)}</dd>
              </dl>
              {/* 最高血圧 */}
              <dl className="simulation-content">
                <dt className="row-2"><div><p>最高</p><p>血圧</p></div></dt>
                <dd>
                  <SelectItemList
                    name={SiC.MAX_BLOOD_PRESSURE}
                    value={viewInputData[SiC.MAX_BLOOD_PRESSURE]}
                    placeholder="選択してください"
                    propagate={this._calcRisk}
                  >
                    {SiC.MAX_BLOOD_PRESSURE.choices.map((choice, index) => (
                      <SelectItem key={index} value={choice.value} label={choice.label} />
                    ))}
                  </SelectItemList>
                </dd>
              </dl>
              {/* 最低血圧 */}
              <dl className="simulation-content">
                <dt className="row-2"><div><p>最低</p><p>血圧</p></div></dt>
                <dd>
                  <SelectItemList
                    name={SiC.MIN_BLOOD_PRESSURE}
                    value={viewInputData[SiC.MIN_BLOOD_PRESSURE]}
                    placeholder="選択してください"
                    propagate={this._calcRisk}
                  >
                    {SiC.MIN_BLOOD_PRESSURE.choices.map((choice, index) => (
                      <SelectItem key={index} value={choice.value} label={choice.label} />
                    ))}
                  </SelectItemList>
                </dd>
              </dl>
            </div>
            <div className="card-content">
              <HeadLine
                level={2}
                color={HEAD_LINE_COLOR.GREEN}
                others={{ style: { paddingTop: '70px' } }}
              >
                健康なグループ&nbsp;{risk.probability.min.toFixed(CommonConstants.DECIMAL_DIGIT)}%
                </HeadLine>
              {healthy.good.map((item, index) => (
                <dl key={index} className={`simulation-content${item.addCss}`}>
                  <dt className={classNames({ 'row-2': item.label.includes('</p><p>') })} dangerouslySetInnerHTML={{ __html: item.label }} />
                  <dd>{item.value}</dd>
                </dl>
              ))}
            </div>
            <div className="card-content" style={{ marginBottom: '40px' }}>
              <HeadLine
                level={2}
                color={HEAD_LINE_COLOR.RED}
                others={{ style: { paddingTop: '67px' } }}
              >
                不健康なグループ&nbsp;{risk.probability.max.toFixed(CommonConstants.DECIMAL_DIGIT)}%
                </HeadLine>
              {healthy.bad.map((item, index) => (
                <dl key={index} className={`simulation-content${item.addCss}`}>
                  <dt className={classNames({ 'row-2': item.label.includes('</p><p>') })} dangerouslySetInnerHTML={{ __html: item.label }} />
                  <dd>{item.value}</dd>
                </dl>
              ))}
            </div>
          </div>
        </Scroll>
      </div>
    )
  }
}
/*
Simulation.propTypes = {
  inputData: React.PropTypes.object.isRequired,
  risk: React.PropTypes.shape({
    probability: React.PropTypes.shape({
      you: React.PropTypes.number.isRequired,
      min: React.PropTypes.number.isRequired,
      max: React.PropTypes.number.isRequired,
    }),
  }),
  initialRisk: React.PropTypes.shape({
    probability: React.PropTypes.shape({
      you: React.PropTypes.number.isRequired,
      min: React.PropTypes.number.isRequired,
      max: React.PropTypes.number.isRequired,
    }),
  }),
  onCalcRisk: React.PropTypes.func.isRequired,
  openModal: React.PropTypes.bool,
  healthy: React.PropTypes.shape({
    good: React.PropTypes.array,
    bad: React.PropTypes.array,
  }),
};*/

export default Simulation
